<template>
    <div class="verification">
      <div class="header">
        <div class="back" @click="handleBack">
          <van-icon name="arrow-left" class="home-icon" />
        </div>
        <div class="title">Verification</div>
      </div>
  
      <div class="verify-list">
        <!-- Basic Verification Item -->
        <div class="verify-item">
          <div class="verify-content">
            <div class="verify-header">
              <div class="verify-title">Basic Verification</div>
              <div class="verify-status completed">Completed</div>
            </div>
            <div class="verify-desc">
              Complete basic email or phone identity verification, which will automatically notify fund transactions via email or phone and track market dynamics immediately
            </div>
          </div>
        </div>
  
        <!-- Identity Verification Item -->
        <div class="verify-item" v-if="!hasUserInfo">
          <div class="verify-content">
            <div class="verify-header">
              <div class="verify-title">Identity Verification</div>
              <div class="verify-status">Unverified</div>
            </div>
            <div class="verify-desc">
              After verifying your real identity, we will arrange 7*24 exclusive VIP customer service and analyst service for you.
            </div>
            <div class="btn-wrapper">
              <van-button 
                class="verify-btn" 
                type="primary" 
                size="small"
                @click="startVerification"
              >
                Start Verification
              </van-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup name="Verification">
  import { ref } from "vue";
  import { Icon as VanIcon, Button as VanButton } from 'vant';
  import { UserApi } from '../api/user.api';
  import { useRouter } from "vue-router";
  const router = useRouter();
  
  const handleBack = () => {
    // Handle back navigation
    console.log('Navigate back to home');
    router.go(-1); // Navigate back to the previous page in the browser's history stack, equivalent to router.back() in Vue Router 3 and earlier versions, or router.push('/') in Vue Router 4 and later versions to navigate to the home page. You can also use router.replace('/') to replace the current page with the home page without adding a new entry to the history stack.
  };
  const hasUserInfo = ref(false)
  const init =  () => {
    UserApi.getHasUserInfo().then (res => {
      console.log(res,111)
      hasUserInfo.value = res.data.hasUserInfo
    })
  };
  init();
  const startVerification = () => {
    // Handle identity verification start
    console.log('Start identity verification process');
    router.push('/kyc');
    // You would typically navigate to verification page here
  };
  </script>
  
  <style scoped>
  .verification {
    height: 100vh;
    background: #f5f5f5;
  }
  
  .header {
    display: flex;
    align-items: center;
    height: 44px;
    background: #f5f5f5;
    padding: 0 15px;
    position: relative;
  }
  
  .back {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  
  .home-icon {
    width: 22px;
    height: 22px;
    font-weight: bold;
    margin-top: 6px;
  }
  
  .title {
    font-size: 16px;
    font-weight: 600;
    position: absolute;
    left: 50%;
    transform: translate(-50%);
  }
  
  .verify-list {
    margin: 12px;
  }
  
  .verify-item {
    background: white;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 12px;
  }
  
  .verify-content {
    width: 100%;
  }
  
  .verify-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
  }
  
  .verify-title {
    font-size: 17px;
    color: #333;
    font-weight: 600;
  }
  
  .verify-status {
    font-size: 14px;
    color: #666;
  }
  
  .verify-status.completed {
    color: #00b42a;
  }
  
  .verify-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    width: 100%;
    margin-top: 8px;
  }
  
  .btn-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }
  
  .verify-btn {
    width: 280px;
    height: 40px;
    border: 0px solid rgb(9, 17, 251);
    background-image: linear-gradient(to right, rgb(48, 55, 232), rgb(94, 182, 237));
    box-shadow: #0008ff33 0 2px 6px;
    opacity: 1;
    color: #fff;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
  }
  </style>